<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <style>
        /* nth 指的是div下的第几个孩子 */
        /* div span:nth-child(1) {
            background-color: purple;
        } */
        /* 选择第二个才能选择到span的第一个 */
        /* div span:nth-child(2) {
            background-color: hotpink;
        } */
        /* 指定类型的选择的一个*/
        
        div span:first-of-type {
            background-color: skyblue;
        }
        /* 权重为12 */
        
        div span:nth-of-type(2) {
            background-color: hotpink;
        }
        /* 类选择器，伪类选择器（伪类选择器），属性选择器 权重为10 */
        /* 伪元素选择器(看不见这个元素，所以叫伪元素) :::before  ::after 权重为1*/
        
        div span:nth-of-type(2)::before {
            content: "123";
        }
    </style>
</head>

<body>
    <div>
        <p>p标签</p>
        <span>span1</span>
        <span>span2</span>
        <span>span3</span>
    </div>
</body>

</html>